import { Layout } from '@/layout';

export const meta = {
  title: 'How can I lint CSS files?',
  description:
    'Learn how to setup Stylelint for Mantine postcss syntax',
  slug: 'how-to-setup-stylelint',
  category: 'tooling',
  tags: ['stylelint', 'lint', 'postcss'],
  created_at: 'December 27, 2023',
  last_updated_at: 'December 27, 2023',
};

export default Layout(meta);

## Installation

[Stylelint](https://stylelint.io/) is a tool to lint CSS and CSS like files.
To get started install `stylelint` and `stylelint-config-standard-scss` packages:

<InstallScript packages="stylelint stylelint-config-standard-scss" />

## Configuration

Create `.stylelintrc.json` file at your project root with the following content:

```json
{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "scss/no-duplicate-mixins": null,
    "scss/at-mixin-pattern": null,
    "scss/at-rule-no-unknown": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}
```

The rules above are required to make Stylelint work with Mantine components.

## Mantine Stylelint config

If you want to have the same Stylelint configuration as Mantine, change `.stylelintrc.json` content to the following:

```json
{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "custom-property-pattern": null,
    "selector-class-pattern": null,
    "scss/no-duplicate-mixins": null,
    "declaration-empty-line-before": null,
    "declaration-block-no-redundant-longhand-properties": null,
    "alpha-value-notation": null,
    "custom-property-empty-line-before": null,
    "property-no-vendor-prefix": null,
    "color-function-notation": null,
    "length-zero-no-unit": null,
    "selector-not-notation": null,
    "no-descending-specificity": null,
    "comment-empty-line-before": null,
    "scss/at-mixin-pattern": null,
    "scss/at-rule-no-unknown": null,
    "value-keyword-case": null,
    "media-feature-range-notation": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}
```

## Additional tools

Add npm script to your `package.json` to lint all css files in your project:

```json
{
  "scripts": {
    "stylelint": "stylelint '**/*.css' --cache"
  }
}
```

To enable linting in your editor, install [stylelint VSCode extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint).
